<template>
  <div class="container">
    <aside>
      <ul>
        <li
          v-for="item of menus"
          :key="item.path"
          :class="item.children.includes(currentRoute) ? 'active' : ''"
        >
          <router-link :to="item.path">{{ item.name }}</router-link>
        </li>
      </ul>
    </aside>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>
<script>
  export default {
    name: 'AccountIndex',
    data() {
      return {
        menus: [
          // {
          //  name: '我的账户',
          //  path: '/account/myaccount',
          //  children: ['myaccount']
          // },
          {
            name: '商品管理',
            path: '/account/myproducts',
            children: ['myproducts', 'productsAdd']
          },
          {
            name: '订单管理',
            path: '/account/order',
            children: ['order']
          },
          // {
          //  name: '代卖管理',
          //  path: '/account/daimai',
          //  children: ['daimai']
          // },
          // {
          //  name: '交易明细',
          //  path: '/account/trade',
          //  children: ['trade']
          // },
          {
            name: '安全设置',
            path: '/account/settings',
            children: ['settings']
          }
        ],
        currentRoute: ''
      };
    },

    watch: {
      $route: {
        immediate: true,
        deep: true,
        handler(to) {
          this.currentRoute = to.name;
        }
      }
    },
    created() {}
  };
</script>
<style lang="scss" type="text/scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  aside {
    flex-basis: 140px;
    flex-shrink: 0;
    padding: 12px;
    border: 1px solid #e5e5e5;
    min-height: 700px;
    background-color: white;
    ul {
      li {
        padding: 12px;
        text-align: center;
        a {
          color: $t1;
          font-size: 15px;
        }
      }
      .active a {
        color: $c1;
        font-weight: bold;
      }
    }
  }
  .main {
    margin-left: 20px;
    flex-grow: 1;
    background-color: white;
  }
}
</style>
